<html>
<head>
<meta charset="utf-8" >
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<title>牌九房间<?php echo $room_number;?></title>

<link rel="stylesheet" type="text/css" href="<?php echo $image_url;?>files/css/paijiu.css">
<link rel="stylesheet" type="text/css" href="<?php echo $image_url;?>files/css/alert.css">
<script type="text/javascript" src="<?php echo $image_url;?>files/js/fastclick.js"></script>


<script type="text/javascript">

	window.addEventListener('load', function() {
		FastClick.attach(document.body);
	}, false);

	var newNum = "";
	var per = window.innerWidth / 530;
	var globalData = {
		"card":"<?php echo $card;?>",
		"roomNumber":"<?php echo $room_number;?>",
		"socket":"<?php echo $socket;?>",
		"hallPath":"ym",
		"roomUrl":"<?php echo $room_url;?>",
		"baseUrl":"<?php echo $base_url;?>",
		"fileUrl": "<?php echo $file_url;?>",
		"roomStatus":"<?php echo $room_status;?>",
		"scoreboard":'<?php echo $balance_scoreboard;?>',
		"session":'<?php echo "$session"?>',
		"shareTitle":"牌九",
		"gameType":"<?php echo $game_type;?>",

		//广播
		"isNotyMsg":'<?php echo "$is_announcement"?>',
		"notyMsg":'<?php echo "$announcement_content"?>',
		"notyTime":'<?php echo "$announcement_sec"?>',
		"notySpeed":8000,
	};
	var userData = {
		"accountId":"<?php echo $user['account_id'];?>",
		"nickname":"<?php echo $user['nickname'];?>",
		"avatar":"<?php echo $user['headimgurl'];?>",
		"myCode":"<?php echo $user['my_code']==-1||$user['my_code']=='-1'||$user['my_code']==''?20000+$user['user_code']:$user['my_code'];?>",
	};
	var configData = {
		"appId":"<?php echo $config_ary['appId'];?>",
		"timestamp":"<?php echo $config_ary['timestamp'];?>",
		"nonceStr":"<?php echo $config_ary['nonceStr'];?>",
		"signature":"<?php echo $config_ary['signature'];?>",
	};
</script>

</head>

<body >
    <style>
        .closeButton{top: 86vh;left: 35.5vw; z-index: 99;width: 123px;text-align: center; position: absolute;}
        .clickMe{position: absolute;top: 6%;left: 2%;width: 24%;z-index:91;text-align: center;height:4.5vh;line-height: 4.5vh;}
        .clickMe img{width:100%;}
        .copyMe{position: absolute;top: 6%;right: 2%;width: 24%;z-index:91;text-align: center;height: 4.5vh;line-height: 4.5vh;border:0;background:none;background-image: url(<?php echo $image_url;?>files/images/guest/copyme.png);background-position:center;background-size: contain; background-repeat: no-repeat;}
    </style>
	<div style="position: fixed;width:100%;height:100%;top:0;left:0;background: #000;z-index:115;" id="loading">
		<div class="load4">
			<div class="loader">Loading...</div>
		</div>
	</div>

	<div class="main" id="app-main" style="position: relative; width: 100%;margin: 0 auto; background: #fff; display: none;">
			<!--广播-->
			<div v-show="isShowNoty" style="position: absolute;background-color: rgba(0,0,0,0.8);width: 100%;height: 4vh;line-height: 4vh;color: white;font-size: 2.5vh;overflow: hidden;z-index: 9998;">
					<img style="position: absolute;top: 0vh;left: 3vw;width: 4vh;height: 4vh;" src="<?php echo $image_url;?>files/images/common/laba.png">
			</div>
			<div v-show="isShowNoty" id="marquee" style="position: absolute;top: 0;left: 12vw;background-color: rgba(0,0,0,0);width: 88vw;height: 4vh;line-height: 4vh;color: white;font-size: 2.5vh;overflow: hidden;z-index: 9999;">
					{{notyMsg}}
			</div>
			<!--end-->

			<div class="roomCard">
				<img  src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/home/fwm.png" />
				<div class="num">
					<div style="position: absolute;top:0;left: 0;width: 100%;height: 100%;background: #000;opacity: .6;border-radius:1.5vh;"></div>
					<div style="position: relative;padding: 0 1.5vh 0 5vh;">{{userData.myCode}}</div>
				</div>
			</div>
        <div class="clickMe"><img src="<?php echo $image_url;?>files/images/guest/clickme.png" v-on:click="location.reload()"></div>
        <button class="copyMe" data-clipboard-text="<?php echo $room_url;?>"></button>
			<img class="bottomTab" src="<?php echo $image_url;?>files/images/nbull/bottom.png" alt="">

			<img class="return" src="<?php echo $image_url;?>files/images/common/icon_home3.png" v-on:click="showAlert(3,'确认返回主页？')" />
			
			<img class="return" src="<?php echo $image_url;?>files/images/common/icon_description3.png" v-on:click="showNoteImg()" style="right: 28.5vh"/>

			<img class="bGameRule" style="right: 22vh" src="<?php echo $image_url;?>files/images/common/icon_rule3.png" v-on:click="showGameRule" />


			<div class="disconnect" v-show="!connectOrNot" style="position: fixed;top:45%;left: 0;width: 100%;text-align: center;z-index: 101"><div style="width: 250px;height:27px;position: absolute;top:-2;left: 50%;margin-left: -125px;background: #000;opacity: .5;border-radius:15px;"></div><a style="font-size: 16px;color: #fff;padding: 5px 14px;position:relative;">已断开连接，正在重新连接...</a></div>

	        <!-- 底部显示底注 -->
	        <div class="myCardTypeBG">
	        </div>
			<div class="myCardType">
			    <div>底分：{{base_score}}分</div>
			</div>
			
			<div class="myCardTypeBG" style="left: 74%">
	        </div>
			<div class="myCardType" style="left: 74%">
			    <div>{{game.round}}&nbsp/&nbsp{{game.total_num}}&nbsp局</div>
			</div>

	        <div class="bottomMessage" v-on:click="showMessage">
	        	<img src="<?php echo $image_url;?>files/images/common/icon_message3.png" style="position: absolute; width: 100%; height: 100%">
	        </div>
	        <div class="bottomHistory" v-on:click="showAudioSetting" style="right: 15.5vh;">
	        	<img src="<?php echo $image_url;?>files/images/common/icon_sound3.png" style="position: absolute; width: 100%; height: 100%">
	        </div>
	        <!--防伪码-->
        <div v-show="isShowAlert&&alertType==4" style="z-index:110;position:fixed;width:15vh;height:12vh;top:7vh;left:50%;margin-left:-7.5vh;background:url(<?php echo $image_url;?>files/images/custom/comm/fwmbg.png) no-repeat 0 0 / 100% 100%">
		    <div style="width:15vh;height:5vh;line-height:5vh;padding-top:0.5vh;text-align:center;font-size:2.8vh;font-weight:bold;color:#fff">{{userData.myCode}}</div>
		    <div style="width:15vh;height:4vh;line-height:4vh;text-align:center;color:#ddd;font-size:2.5vh;font-weight:bold;background:;">防伪码</div>
		</div>
	        <!-- 提示框 -->
			<div class="alert" id="valert" v-show="isShowAlert">
				<div class="alertBack"></div>
				<div class="mainPart">
					<div class="backImg">
						<div class="blackImg"></div>
					</div>
					<!-- <div class="id" v-show="alertType==4">
						<img src="../images/ID.png">
						<div class="text">
							你的{{dealerName}}ID:{{user_id}}
						</div>			
					</div> -->	
					<div class="alertText">
						<div>{{alertText}}</div>
					</div>
					
					<div v-show="alertType==1" v-if="isShop">
						<div class="buttonMiddle activeButton" v-on:click="closeAlert">购买房卡</div>
					</div>
					<div v-show="alertType==1" v-if="!isShop">
						<div class="buttonMiddle activeButton" v-on:click="hall">返回首页</div>
					</div>			
					<div v-show="alertType==2">
						<div class="buttonMiddle activeButton" v-on:click="hall">返回首页</div>
					</div>			
					<div v-show="alertType==3">
						<div class="buttonLeft activeButton" v-on:click="hall">返回首页</div>
						<div class="buttonRight activeButton" v-on:click="closeAlert">取消</div>
					</div>			
					<div v-show="alertType==4">
						<div class="buttonLeft activeButton" v-on:click="hall">创建房间</div>
						<div class="buttonRight activeButton" v-on:click="sitDown">加入游戏</div>
					</div>
					<div v-show="alertType==5">
						<div class="buttonMiddle activeButton" v-on:click="getCards">领取</div>
					</div>
					<div v-show="alertType==7">
						<div class="buttonMiddle activeButton" v-on:click="hall">返回首页</div>
					</div>	
					<div v-show="alertType==8">
					</div>
					<div v-show="alertType==9">
						<div class="buttonMiddle activeButton" v-on:click="showBreakRoom">确定</div>
					</div>
					<div v-show="alertType==10">
					    <div class="buttonLeft activeButton" v-on:click="closeAlert">取消</div>
						<div class="buttonRight activeButton" v-on:click="confirmBreakRoom">确定</div>
					</div>
					<div v-show="alertType==11">
						<div class="buttonMiddle activeButton" v-on:click="closeAlert">知道了</div>
					</div>
					<div v-show="alertType==21">
						<div class="buttonMiddle activeButton" v-on:click="closeAlert">确定</div>
					</div>
					<div v-show="alertType==22">
						<div class="buttonMiddle activeButton" v-on:click="closeAlert">确定</div>
					</div>	
				
	                <div v-show="alertType==31">
	                    <div class="buttonMiddle activeButton" v-on:click="reloadView()">确定</div>
	                </div>
	                <div v-show="alertType==32">
						<div class="buttonMiddle activeButton" v-on:click="reloadView()">重新登录</div>
					</div>  
	                <div v-show="alertType==41">
	                    <div class="buttonMiddle activeButton" v-on:click="confirmMessage()">确定</div>
	                </div>     				
				</div>
			</div>

	        <!-- 游戏桌子 -->
			<div class="table" id="table" style="position: relative; width: 100%; height: 100%; z-index: 80; overflow: hidden;">
				<img class="tableBack"  src="<?php echo $image_url;?>files/images/paijiu/table.jpg" style="position: absolute;top:0;left: 0;width: 100vw;height: 100vh" />

				<!-- 发牌 ||p.account_status==6||p.account_status==7 -->
				<div class="cardDeal">
				    <!-- p.account_id>0&&p.account_status>2&&p.account_status<8&&(p.num!=1||(p.account_status!=7&&p.account_status!=8&&!player[0].is_showCard))&&(game.cardDeal>0) -->
					<div v-for="p in player" v-if="ruleInfo.banker_mode!=5" v-show="p.account_id>0&&p.account_status>2&&p.account_status<8&&(p.num!=1||(p.account_status!=7&&p.account_status!=8&&!player[0].is_showCard))&&(game.cardDeal>0)">
						<div class="card" v-bind:class="'card' + p.num + '1'" style="z-index: 14;" v-show="game.cardDeal>0"></div>
						<div class="card" v-bind:class="'card' + p.num + '2'" style="z-index: 13;" v-show="game.cardDeal>1"></div>

					</div>

					<div v-for="p in player" v-if="ruleInfo.banker_mode==5" v-show="p.account_id>0&&p.account_status>2&&p.account_status<8&&(p.num!=1||(p.account_status!=7&&p.account_status!=8&&!player[0].is_showCard))&&(game.cardDeal>0)">
						<div class="card" v-bind:class="'card' + p.num + '1'" style="z-index: 14;" v-show="game.cardDeal>0"></div>
						<div class="card" v-bind:class="'card' + p.num + '2'" style="z-index: 13;" v-show="game.cardDeal>1"></div>
					</div>
	                
	                <!-- 玩家1发完牌之后  -->
					<div class="myCards" v-show="player[0].is_showCard&&player[0].account_status>2&&player[0].account_status<=7&&game.show_card">
	                    <div class="cards3D">
							<div class="cards card0" v-show="player[0].account_status >2 && player[0].account_status <= 7">
								<div class="face front" ></div>
								<div class="face back" v-bind:class="'card' + player[0].card[0]"></div>
							</div> 
							<div class="cards card1" v-show="player[0].account_status >2 && player[0].account_status <= 7">
								<div class="face front" v-on:click="seeMyCard4"></div>
								<div class="face back" v-bind:class="'card' + player[0].card[1]"></div>
							</div>
						</div>						
					</div>
	                
	                <!-- 玩家1摊牌看牌  -->
					<div class="myCards" v-show="player[0].is_showCard&&player[0].account_status==8&&game.show_card&&player[0].card_open.length>0" >
						<div class="cards card00">
							<div class="face back" v-bind:class="'card' + player[0].card_open[0]" style="-webkit-transform: rotateY(0deg);"></div>
						</div> 

						<div class="cards card01">
							<div class="face back" v-bind:class="'card' + player[0].card_open[1]" style="-webkit-transform: rotateY(0deg);"></div>
						</div> 					
					</div>
				</div>

				<!-- game.cardDeal==-1&&p.account_status>1&&p.account_status!=6&&p.account_status!=7&&p.card.length>0-->

				<div class="cardOver" style="position: absolute; width: 100%; height: 100%; overflow:hidden;">
					<div v-for="p in player" v-if="p.num!=1" v-show="p.account_status>=8&&p.card_open.length>0&&game.show_card">
						<div class="cards" v-bind:class="'card' + p.num + ' card' + p.num + '11'" style="z-index: 14;">
							<div class="face front"></div>
							<div class="face back" v-bind:class="'card' + p.num + ' card' + p.card_open[1]"></div>
						</div>

						<div class="cards" v-bind:class="'card' + p.num + ' card' + p.num + '21'" style="z-index: 13">
							<div class="face front"></div>
							<div class="face back" v-bind:class="'card' + p.card_open[0]"></div>
						</div>
					</div>
				</div>
	            
	            <!-- 抢庄文字图片 "{true: 'bankerSelected', false: 'bankerUnSelected'}[createInfo.bull.banker_mode==3]"   'memberRobText' + p.num-->
				<div v-for="p in player" v-if="p.num!=1&&ruleInfo.banker_mode!=2" v-bind:class="{true:'memberGoText' + p.num,false:'memberRobText' + p.num}[ruleInfo.banker_mode==5]" v-show="p.account_status==4||p.account_status==5">
					<img v-bind:src="p.robImg" style="position: absolute; width: 100%;">
				</div>

				<div v-for="p in player" v-if="p.num!=1&&ruleInfo.banker_mode==2" v-bind:class="'memberFreeRobText' + p.num" v-show="p.account_status==4||p.account_status==5">
					<img v-bind:src="p.robImg" style="position: absolute;  width: 100%;">
				</div>

				<div v-for="p in player" v-if="p.num!=1&&ruleInfo.banker_mode==2" v-bind:class="'memberGoTimesText' + p.num" v-show="p.account_status==5&&p.bankerMultiples>=1">
					<img v-bind:src="p.bankerTimesImg" style="position: absolute; width: 100%;">
				</div>
	            
	            <!-- 倍数文字图片 -->
	            <div class="memberTimesText1" v-if="ruleInfo.banker_mode!=4" v-show="player[0].account_status>=6&&game.show_card&&!player[0].is_banker&&player[0].multiples>0">
	            	<img v-bind:src="player[0].timesImg" style="position: absolute; width: 100%;">
	            </div>
				<div v-for="p in player" v-if="p.num!=1&&ruleInfo.banker_mode!=4" v-bind:class="'memberTimesText' + p.num" v-show="p.account_status>=6&&game.show_card&&!p.is_banker&&p.multiples>0">
				    <img v-bind:src="p.timesImg" style="position: absolute; width: 100%;">
				</div>
	            
	            <!-- 庄家倍数文字图片 -->
				<div class="memberTimesText1" v-if="ruleInfo.banker_mode==2" v-show="player[0].account_status>=5&&game.show_card&&player[0].is_banker&&player[0].bankerMultiples>0">
	            	<img v-bind:src="player[0].bankerTimesImg" style="position: absolute; width: 100%;">
	            </div>
				<div v-for="p in player" v-if="p.num!=1&&ruleInfo.banker_mode==2" v-bind:class="'memberTimesText' + p.num" v-show="p.account_status>=5&&game.show_card&&p.is_banker&&p.bankerMultiples>0">
				    <img v-bind:src="p.bankerTimesImg" style="position: absolute; width: 100%;">
				</div>
	            
	            <!-- 牛几图片 -->
				<div v-for="p in player"  v-bind:class="'memberBull memberBull' + p.num" v-show="p.account_status==8&&game.show_card&&p.bullImg.length>=1">
					 <img src="<?php echo $image_url;?>files/images/paijiu/back.png" style="position: absolute;top:-10%;left: -10%;width:120% ;height:120%">
				    <img v-bind:src="p.bullImg" style="height:100%;position: relative;" >
				</div>
	            
	            <!-- 每局得分 -->

	            <!-- 玩家1得分 -->
	            <div  class="memberScoreText1" v-show="game.show_score" style="display: none;">
				    <label v-show="player[0].single_score<0&&player[0].account_status>=8"  style="position: absolute; line-height: 4vh; width: 100%; height: 4vh; text-align: center;color: white; font-size: 3vh;;font-family:'Helvetica 微软雅黑'; -webkit-text-stroke: 1.3px;text-shadow: 1px 2px 2px #022055; ">{{player[0].single_score}}</label>
				    <label v-show="player[0].single_score>0&&player[0].account_status>=8"  style="position: absolute; line-height: 4vh; width: 100%; height: 4vh; text-align: center;color: rgb(234,171,55); font-size: 3vh;font-family:'Helvetica 微软雅黑'; -webkit-text-stroke: 1.3px;text-shadow: 1px 2px 2px #782a00;">+{{player[0].single_score}}</label>
				    <label v-show="player[0].single_score==0&&player[0].account_status>=8"  style="position: absolute; line-height: 4vh; width: 100%; height: 4vh; text-align: center;color: rgb(234,171,55); font-size: 3vh;font-family:'Helvetica 微软雅黑'; -webkit-text-stroke: 1.3px;text-shadow: 1px 2px 2px #782a00;">0</label>
				</div>

				<div v-for="p in player"  v-if="p.num==2||p.num==3||p.num==4" v-bind:class="'memberScoreText' + p.num" v-show="game.show_score" style="display: none;">
				    <p v-show="p.single_score<0&&p.account_status>=8" style="position: absolute; line-height: 4vh; width:100%;height: 4vh; text-align: right;color: white; font-size: 3vh;font-family:'Helvetica 微软雅黑'; -webkit-text-stroke: 1.3px;text-shadow: 1px 2px 2px #022055; ">{{p.single_score}}</p>
				    <p v-show="p.single_score>0&&p.account_status>=8" style="position: absolute; line-height: 4vh; width:100%;height: 4vh; text-align: right;color: rgb(234,171,55); font-size: 3vh;font-family:'Helvetica 微软雅黑'; -webkit-text-stroke: 1.3px;text-shadow: 1px 2px 2px #782a00;">+{{p.single_score}}</p>
				    <p v-show="p.single_score==0&&p.account_status>=8" style="position: absolute; line-height: 4vh; width:100%;height: 4vh; text-align: right;color: rgb(234,171,55); font-size: 3vh;;font-family:'Helvetica 微软雅黑'; -webkit-text-stroke: 1.3px;text-shadow: 1px 2px 2px #782a00; ">0</p>
				</div>

				<div v-for="p in player"  v-if="p.num==7||p.num==8||p.num==9" v-bind:class="'memberScoreText' + p.num" v-show="game.show_score" style="display: none;">
				    <label v-show="p.single_score<0&&p.account_status>=8" style="position: absolute; line-height: 4vh; height: 4vh; text-align: left;color: white; font-size: 3vh;font-family:'Helvetica 微软雅黑'; -webkit-text-stroke: 1.3px;text-shadow: 1px 2px 2px #022055; ">{{p.single_score}}</label>
				    <label v-show="p.single_score>0&&p.account_status>=8" style="position: absolute; line-height: 4vh; height: 4vh; text-align: left;color: rgb(234,171,55); font-size: 3vh;font-family:'Helvetica 微软雅黑'; -webkit-text-stroke: 1.3px;text-shadow: 1px 2px 2px #782a00;">+{{p.single_score}}</label>
				    <label v-show="p.single_score==0&&p.account_status>=8" style="position: absolute; line-height: 4vh; height: 4vh; text-align: left;color: rgb(234,171,55); font-size: 3vh;;font-family:'Helvetica 微软雅黑'; -webkit-text-stroke: 1.3px;text-shadow: 1px 2px 2px #782a00;">0</label>
				</div>

				<!-- 玩家4得分 -->
				<div  v-for="p in player" v-if="p.num==5||p.num==6" v-bind:class="'memberScoreText' + p.num"  v-show="game.show_score" style="display: none;">
				    <label v-show="p.single_score<0&&p.account_status>=8" style="position: absolute; line-height: 4vh; width: 100%; height: 4vh; text-align: center; color: white; font-size: 3vh;font-family:'Helvetica 微软雅黑'; -webkit-text-stroke: 1.3px;text-shadow: 1px 2px 2px #022055; ">{{p.single_score}}</label>
				    <label v-show="p.single_score>0&&p.account_status>=8"  style="position: absolute; line-height: 4vh; width: 100%; height: 4vh; text-align: center; color: rgb(234,171,55); font-size: 3vh;font-family:'Helvetica 微软雅黑'; -webkit-text-stroke: 1.3px;text-shadow: 1px 2px 2px #782a00;">+{{p.single_score}}</label>
				    <label v-show="p.single_score==0&&p.account_status>=8" style="position: absolute; line-height: 4vh; width: 100%; height: 4vh; text-align: center; color: rgb(234,171,55); font-size: 3vh;font-family:'Helvetica 微软雅黑'; -webkit-text-stroke: 1.3px;text-shadow: 1px 2px 2px #782a00;">0</label>
				</div>


				<!-- 玩家  -->	
	            <div key="player[0].num" class="member" v-bind:class="'member' + player[0].num" v-show="player[0].account_id>0 && player[0].num==1">
	            	<!-- 玩家头像 -->
					<img v-bind:src="player[0].headimgurl" class="avatar">
					<img src="<?php echo $image_url;?>files/images/nbull/player_selected.png" class="banker" v-show="player[0].is_banker">
					<!-- 玩家昵称 
					<div class="title">{{p.nickname}}</div>-->
					<!-- 玩家积分 
					<div class="score">{{p.account_score}}</div>-->

					<div class="bottom" style="background-color: rgba(0, 0, 0, 0.6); border-radius: 2px;overflow: hidden;">
						<div class="bname" style="text-align: center;overflow: hidden;">{{player[0].nickname}}</div>
						<div class="bscore" style="text-align: center;overflow: hidden;">{{player[0].account_score}}</div>
					</div>

					<img v-bind:id="'banker' + player[0].account_id" src="<?php echo $image_url;?>files/images/nbull/banker_bg.png" class="background" style="position: absolute; top: -0.2vh;left: -0.2vh;width: 7.86vh; height: 7.86vh; display: none;" />

					<img src="<?php echo $image_url;?>files/images/paijiu/banker_icon.png" class="background" style="position: absolute;top: -1.4vh;left: -1.4vh;width: 3vh; height: 3vh;" v-show="player[0].is_banker">

					<img v-bind:id="'bankerAnimate' + player[0].num" src="<?php echo $image_url;?>files/images/nbull/banker_animate.png" style="position: absolute; top: -0.2vh; left: -0.2vh; width: 7.86vh; height: 7.86vh; display: none;">
					<img v-bind:id="'bankerAnimate1' + player[0].num" src="<?php echo $image_url;?>files/images/nbull/banker_animate.png" style="position: absolute; top: -0.2vh; left: -0.2vh; width: 7.86vh; height: 7.86vh; display: none;">


					<img src="<?php echo $image_url;?>files/images/paijiu/ready.jpg" class="ready"  v-show="player[0].account_status==2" /> 
					<!-- 玩家离开或不在线 -->
	                <div class="quitBack" v-show="player[0].num>1&&p.online_status==0" ></div>

	            </div>

				<div  v-for="p in player" key="p.num" class="member" v-bind:class="'member' + p.num" v-show="p.account_id>0 && p.num!=1" >
	                
					<!-- 玩家头像 -->
					<img v-bind:src="p.headimgurl" class="avatar">
					<img src="<?php echo $image_url;?>files/images/nbull/player_selected.png" class="banker" v-show="p.is_banker">
					<!-- 玩家昵称 
					<div class="title">{{p.nickname}}</div>-->
					<!-- 玩家积分 
					<div class="score">{{p.account_score}}</div>-->

					<div class="bottom" style="background-color: rgba(0, 0, 0, 0.6); border-radius: 2px;overflow: hidden;">
						<div class="bname" style="text-align: center;overflow: hidden;">{{p.nickname}}</div>
						<div class="bscore" style="text-align: center;overflow: hidden;">{{p.account_score}}</div>
					</div>

					<img v-bind:id="'banker' + p.account_id" src="<?php echo $image_url;?>files/images/nbull/banker_bg.png" class="background" style="position: absolute; top: -0.2vh;left: -0.2vh;width: 7.86vh; height: 7.86vh; display: none;" />

					<img src="<?php echo $image_url;?>files/images/paijiu/banker_icon.png" class="background" style="position: absolute; top: -1.4vh;left: -1.4vh;width: 3vh; height: 3vh;" v-show="p.is_banker">

					<img v-bind:id="'bankerAnimate' + p.num" src="<?php echo $image_url;?>files/images/nbull/banker_animate.png" style="position: absolute; top: -0.2vh; left: -0.2vh; width: 7.86vh; height: 7.86vh; display: none;">
					<img v-bind:id="'bankerAnimate1' + p.num" src="<?php echo $image_url;?>files/images/nbull/banker_animate.png" style="position: absolute; top: -0.2vh; left: -0.2vh; width: 7.86vh; height: 7.86vh; display: none;">

					<!-- 玩家离开或不在线 -->
					<img src="<?php echo $image_url;?>files/images/paijiu/ready.jpg" class="ready"  v-show="p.account_status==2" /> 
	                <div class="quitBack" v-show="p.num>1&&p.online_status==0" ></div>

				</div>
	            
	            <!-- 玩家金币 -->
	            
	            <div id="playerCoins" style="display: none;">
	            	<div v-for='p in player'>
	            		<div v-for='coin in p.coins' class="memberCoin" v-bind:class="coin">
	            			<img src="<?php echo $image_url;?>files/images/common/coin.png" style="position: absolute; width: 100%; height: 100%">
	            		</div>
	            	</div>
	            </div>

	            <!-- 显示玩家消息文本 p.messageOn-->
				<div v-for="p in player">
					<div class="messageSay" v-bind:class="'messageSay' + p.num" v-show="p.messageOn">
						<div>{{p.messageText}}</div>
						<div class="triangle"> </div>
					</div>
				</div>
	            
	            <!-- 游戏状态:选择抢庄 player[0].account_status==3 -->
	            <div id="divRobBankerText" v-show="showClockRobText&&ruleInfo.banker_mode!=4" v-bind:style="'position: absolute;top: 33%; left: 0px; width:' + width + 'px; height: 30px;'">
	            	<p style="color: white; font-size: 2vh;width: 100%;height: 30px; line-height: 30px; text-align: center;font-family:'Helvetica 微软雅黑';">{{ruleInfo.bankerText}}</p>
	            </div>
	            <!-- 游戏状态:闲家下注 player[0].account_status==6&&game.show_coin -->
	            <div id="divBetText" v-show="showClockBetText" v-bind:style="'position: absolute;top: 33%; left: 0px; width:' + width + 'px; height: 30px;'">
	            	<p style="color: white; font-size: 2vh; width: 100%;height: 30px; line-height: 30px; text-align: center;font-family:'Helvetica 微软雅黑';">闲家下注</p>
	            </div>
	            <!-- 游戏状态:等待摊牌 -->
	            <div id="divBetText" v-show="showClockShowCard" v-bind:style="'position: absolute;top: 33.5%; left: 0px; width:' + width + 'px; height: 30px;'">
	            	<p style="color: white; font-size: 2vh; width: 100%;height: 30px; line-height: 30px; text-align: center;font-family:'Helvetica 微软雅黑';">等待摊牌</p>
	            </div>

	            <!-- 倒计时时钟 position: absolute; top: 38%; left: 44%; width: 40px; height: 42px; -->
				<div id="" class="clock" v-show="game.time>-1" v-bind:style="'position: absolute; top: 38%; left:' + (width - 34) / 2 + 'px; width: 34px; height: 42px;'">
				    <img src="<?php echo $image_url;?>files/images/common/clock2.png" style="position: absolute; width: 100%; height: 100%;" />
				    <p style="position: absolute; top:8px; left: 0px; width: 34px; height: 34px; color: #000; text-align: center; line-height: 34px;">
				        {{game.time}}
				    </p>
				</div>
                <img class="closeButton" src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/game/closeButton.png"
                     v-if="(game.status==0||game.status==1)&& (player[0].account_status==1||player[0].account_status==0)&& game.round!=game.total_num && game.creator_id == userData.accountId && game.round ==0"  v-on:click="imCloseRoom" />
	            <!-- 按钮操作区域 -->
	            <div id="operationButton" >

					<div  v-show="(game.status==0||game.status==1)&&game.round!=game.total_num&&(player[0].account_status==1||player[0].account_status==0)&&player[0].num==1&&player[0].account_id>0&&canBreak!=1"  v-on:click="imReady" class="singleButton activeButton">
						<img src="<?php echo $image_url;?>files/images/common/button_zhunbei.png" />

					</div>

	                <!-- 抢庄 -->
	            	<div v-show="showRob&&ruleInfo.banker_mode==1" v-on:click="robBanker(1)"   class="rob activeButton">
	            		<img src="<?php echo $image_url;?>files/images/common/button_qiang.png" >

	            	</div>

	                <!-- 不抢 -->
	            	<div v-show="showRob&&ruleInfo.banker_mode==1" v-on:click="notRobBanker"  class="notRob activeButton">
	            		<img src="<?php echo $image_url;?>files/images/common/button_buqiang.png" >
	   
	            	</div>

	            	<!-- 上庄 -->
	            	<div v-show="showRob&&ruleInfo.banker_mode==5&&game.round==1" v-on:click="robBanker(1)"  class="rob activeButton">
	            		<img src="<?php echo $image_url;?>files/images/common/button_shang.png" >
	            	
	            	</div>

	                <!-- 不上庄 -->
	            	<div v-show="showRob&&ruleInfo.banker_mode==5&&game.round==1" v-on:click="notRobBanker" class="notRob activeButton">
	            		<img src="<?php echo $image_url;?>files/images/common/button_bushang.png" >
	            		
	            	</div>

	            	<!-- 准备 -->
	            	<div v-show="(player[0].account_status==1||player[0].account_status==0)&&player[0].num==1&&ruleInfo.banker_mode==5&&canBreak==1&&game.round!=game.total_num&&player[0].is_banker" v-on:click="clickGameOver"  class="rob activeButton">
	            		<img src="<?php echo $image_url;?>files/images/common/button_xia.png" >
	            	
	            	</div>

	                <!-- 下庄 -->
	            	<div v-show="(player[0].account_status==1||player[0].account_status==0)&&player[0].num==1&&ruleInfo.banker_mode==5&&canBreak==1&&game.round!=game.total_num&&player[0].is_banker" v-on:click="imReady"   class="notRob activeButton">
	            		<img src="<?php echo $image_url;?>files/images/common/button_zhunbei.png" >

	            	</div>

	            	<!-- 1倍 -->
	            	<div class="divCoin times1" v-show="showRob&&ruleInfo.banker_mode==2" v-on:click="robBanker(1)" >
	            		<img src="<?php echo $image_url;?>files/images/common/button_time1.png" >
	            	</div>
	                
	                <!-- 2倍 -->
	            	<div class="divCoin times2" v-show="showRob&&ruleInfo.banker_mode==2" v-on:click="robBanker(2)" >
	            		<img src="<?php echo $image_url;?>files/images/common/button_time2.png" >
	            	</div>
	                
	                <!-- 4倍 -->
	            	<div class="divCoin times3" v-show="showRob&&ruleInfo.banker_mode==2" v-on:click="robBanker(4)" >
	            		<img src="<?php echo $image_url;?>files/images/common/button_time4.png" >
	            	</div>
	                
	                <!-- 不抢 -->
	            	<div class="divCoin times4" v-show="showRob&&ruleInfo.banker_mode==2" v-on:click="notRobBanker">
	            		<img src="<?php echo $image_url;?>files/images/common/button_time0.png" >
	            	</div>

	                <!-- 摊牌 -->
	            	<div id="showShowCardButton" v-show="showShowCardButton" v-on:click="showCard" class="singleButton activeButton">
	            		<img src="<?php echo $image_url;?>files/images/common/button_tanpai.png" >
	            	</div>
	                
	                <!-- 1倍 -->
	            	<div class="divCoin times1" v-show="showTimesCoin&&!player[0].multiples>0 && !player[0].is_banker&&player[0].account_status>=6" v-on:click="selectTimesCoin(1)">
	            		<img v-bind:src="'<?php echo $image_url;?>files/images/common/button_time1.png'" >
	            	</div>
	                
	                <!-- 2倍 -->
	            	<div class="divCoin times2" v-show="showTimesCoin&&!player[0].multiples>0&& !player[0].is_banker&&player[0].account_status>=6" v-on:click="selectTimesCoin(2)" >
						<img v-bind:src="'<?php echo $image_url;?>files/images/common/button_time2.png'" >
	            	</div>
	                
	                <!-- 4倍 -->
	            	<div class="divCoin times3" v-show="showTimesCoin&&!player[0].multiples>0&& !player[0].is_banker&&player[0].account_status>=6" v-on:click="selectTimesCoin(4)" >
						<img v-bind:src="'<?php echo $image_url;?>files/images/common/button_time4.png'" >
	            	</div>
	                
	                <!-- 5倍 -->
	            	<div class="divCoin times4" v-show="showTimesCoin&&!player[0].multiples>0&& !player[0].is_banker&&player[0].account_status>=6" v-on:click="selectTimesCoin(5)" >
						<img v-bind:src="'<?php echo $image_url;?>files/images/common/button_time5.png'" >
	            	</div>
	                
	                <!-- 抢庄文字 -->
	            	<div v-if="showRobText&&ruleInfo.banker_mode!=5&&ruleInfo.banker_mode!=2" v-bind:style="viewStyle.robText" >
	            		<img src="<?php echo $image_url;?>files/images/bull/text_rob.png" >
	            	</div>

	            	<div v-if="showRobText&&ruleInfo.banker_mode==2" v-bind:style="viewStyle.robText2" >
	            		<img src="<?php echo $image_url;?>files/images/bull/text_rob.png" >
	            	</div>

	            	<div v-if="showRobText&&ruleInfo.banker_mode==2&&player[0].bankerMultiples>0" v-bind:style="viewStyle.robTimesText" >
	            		<img v-bind:src="player[0].bankerTimesImg" >
	            	</div>
	                
	                <!-- 不抢庄文字 -->
	            	<div v-if="showNotRobText&&ruleInfo.banker_mode!=5" v-bind:style="viewStyle.notRobText">
	            		<img src="<?php echo $image_url;?>files/images/bull/text_notrob.png" >
	            	</div>

	            	<!-- 上庄文字 -->
	            	<div v-if="showRobText&&ruleInfo.banker_mode==5&&game.round<2" v-bind:style="viewStyle.robText" >
	            		<img src="<?php echo $image_url;?>files/images/bull/text_go.png" >
	            	</div>
	                
	                <!-- 不上庄文字 -->
	            	<div v-if="showNotRobText&&ruleInfo.banker_mode==5&&game.round<2" v-bind:style="viewStyle.notRobText">
	            		<img src="<?php echo $image_url;?>files/images/bull/text_notgo.png" >
	            	</div>

	            	<!-- 等待玩家下注 -->
	            	<div v-show="showBankerCoinText" v-bind:style="viewStyle.coinText">
	            		<p v-bind:style="viewStyle.coinText1">等待闲家下注</p>
	            	</div>

	            	<!-- 点击看牌-->
	            	<div v-show="showClickShowCard" v-bind:style="viewStyle.showCardText">
	            		<p v-bind:style="viewStyle.showCardText1">点击牌面看牌</p>
	            	</div>
	            </div>
			</div>

			
	        <div class="ranking hideRanking" id="ranking" style="z-index: 1">
				<div class="rankBack">
					<img crossOrigin="Anonymous" src="<?php echo $image_url;?>files/images/paijiu/rank_bg.jpg" style="position: absolute;top: 0;left: 0;width: 100%">
				</div>

				<div class="rankText" style="position: absolute;top: 4%;">
					<img crossOrigin="Anonymous" src="<?php echo $image_url;?>files/images/paijiu/rank_frame.png" style="position: absolute;top: 0;left: 0;width: 200vw;">
					<div class="time" v-show="playerBoard.round>0" style="position: absolute;top: 24vw;width: 100%;">
						<a style="font-size: 6vw;">{{dealerName}}房间:{{game.room_number}}&nbsp&nbsp&nbsp&nbsp{{playerBoard.record}}&nbsp&nbsp&nbsp&nbsp{{game.total_num}}局</a>
					</div>
					<div style="height: 42vw;"></div>			
					<div v-for="p in playerBoard.score" class="scoresItem" v-bind:class="{true: 'scoresItemYellow', false: 'scoresItemWhite'}[p.account_score>0]" v-show="p.account_id>0">
					    <img crossOrigin="Anonymous" src="<?php echo $image_url;?>files/images/common/rank_bigwinner.png" style="top: 0; margin-top: -1.5vw; left: 2vw;height: 120%" v-show="p.isBigWinner==1">
					    <div class="id">{{p.account_code}}</div>
						<div class="name">{{p.nickname}}</div>
						<div class="currentScores"><a v-show="p.account_score>0">+</a>{{p.account_score}}</div>
					</div>
				</div>
				<div class="button roundEndShow" >
					<img crossOrigin="Anonymous" src="<?php echo $image_url;?>files/images/common/rank_save.png" style="float: left;width: 30%;margin-left: 34%;" />
					
				</div>
			</div>


			<!-- end图片  -->	
			<div id="endCreateRoom" class="end" style="position: fixed;width: 100%;height:100%;top:0;left:0;z-index: 120;display: none;">
				<img src="" style="width: 100vw;position: absolute;top:0;left: 0;height: 100vh;" id="end"  usemap="#planetmap1" />
				<div id="endCreateRoomBtn" style="position:absolute;right:13vw; width: 33vw; height: 9.6vw;bottom: 8%;z-index:121;overflow: hidden;" v-on:click="personInfo()"></div>
			</div>


			<div class="message" v-show="isShowMessage" >
				<div class="messageBack" style="z-index: 999" v-on:click="hideMessage"></div>
				<div class="textPartOuter" style="z-index: 999"></div>
				<div id="message-box" class="textPart" v-bind:style="'height: ' + 0.39 * height + 'px;z-index: 999'">
					<div id="scroll-box" class="textList" style="width: 100%;">
						<div class="textItem" v-for="m in message" v-on:click="messageOn(m.num)">{{m.text}}</div>
					</div>
				</div>
			</div>
			


			
			<!-- 游戏规则 -->
	        <div class="createRoom" id="vroomRule" v-show="ruleInfo.isShowRule" v-on:click="cancelGameRule">
				<div class="createRoomBack"></div>
				<div class="mainPart" >			
					<div  class="createB"></div>
					<div class="createTitle">
						<img src="<?php echo $image_url;?>files/images/common/txt_rule.png" />
					</div>	
	                
	                <img src="<?php echo $image_url;?>files/images/common/cancel.png" class="cancelCreate" v-on:click="cancelGameRule"/>
	    
					<div class="blueBack">
	                     <div class="selectPart" style="top: 0px;height:4vh;line-height:4.1vh;">
							<div class="selectTitle" style="width: 100%;font-size: 2vh; text-align: center;color: #efd0a4; background-color: #4e3f79;opacity: 1.0">创建房间,游戏未进行,不消耗房卡</div>
						</div>
	                    
	                    <div class="selectPart" style="height:4vh;line-height:4vh;padding:0.8vh 0;">
							<div class="selectTitle">模式：</div>
							<div class="selectList">
								<div class="selectItem" style="margin-left:10px;" v-if="ruleInfo.banker_mode==1">
									<div class="selectText" >自由抢庄</div>
								</div>							
								<div class="selectItem" style="margin-left:10px;" v-if="ruleInfo.banker_mode==2">
									<div class="selectText" >明牌抢庄</div>
								</div>

							</div>
						</div>

						<div class="selectPart" style="height:4vh;line-height:4vh;padding:0.8vh 0;">
							<div class="selectTitle">底分：</div>
							<div class="selectList" >
								<div class="selectItem" style="margin-left:10px;" v-if="ruleInfo.baseScore==1">
									<div class="selectText">1分</div>
								</div>							
								<div class="selectItem" style="margin-left:10px;" v-if="ruleInfo.baseScore==2">
									<div class="selectText">2分</div>
								</div>							
								<div class="selectItem" style="margin-left:10px;" v-if="ruleInfo.baseScore==3">
									<div class="selectText">3分</div>
								</div>
								<div class="selectItem" style="margin-left:10px;" v-if="ruleInfo.baseScore==4">
									<div class="selectText">4分</div>
								</div>
								<div class="selectItem" style="margin-left:10px;" v-if="ruleInfo.baseScore==5">
									<div class="selectText">5分</div>
								</div>
							</div>
						</div>		

						<div class="selectPart" style="height:12vh;line-height:4vh;padding:0.8vh 0;">
							<div class="selectTitle">规则：</div>
							<div class="selectList">						
								<div class="selectItem" style="margin-left:10px;">
									<div class="selectText" >至尊10倍，双天双地双人8倍，对子6倍，天王地王5倍，天杠地杠天高九地高九4倍，九点3倍，八点2倍</div>
								</div>
							</div>
						</div>	
						<div class="selectPart" style="height:4vh;line-height:4vh;padding:0.8vh 0;">
							<div class="selectTitle">牌型：</div>
							<div class="selectList">						
								<div class="selectItem" style="margin-left:10px;" >
									<div class="selectText" >丁三牌及二四牌可以互换使用</div>
								</div>
							</div>
						</div>	


						<div class="selectPart" style="height:4vh;line-height:4vh;padding:0.8vh 0;">
							<div class="selectTitle">局数：</div>
							<div class="selectList">
								<div class="selectItem" style="margin-left:10px;" v-if="ruleInfo.ticket==1">
									<div class="selectText" >12局X2房卡</div>
								</div>							
								<div class="selectItem" style="margin-left:10px;" v-if="ruleInfo.ticket==2">
									<div class="selectText" >24局X4房卡</div>
								</div>
							</div>
						</div>

						<div class="selectPart" style="height:4vh;line-height:4vh;padding:0.8vh 0;" v-if="ruleInfo.banker_mode==5">
							<div class="selectTitle">上庄：</div>
							<div class="selectList">
								<div class="selectItem" style="margin-left:10px;" v-if="ruleInfo.banker_score==1">
									<div class="selectText">无</div>
								</div>							
								<div class="selectItem" style="margin-left:10px;" v-if="ruleInfo.banker_score==2">
									<div class="selectText">300</div>
								</div>							
								<div class="selectItem" style="margin-left:10px;" v-if="ruleInfo.banker_score==3">
									<div class="selectText">500</div>
								</div>
								<div class="selectItem" style="margin-left:10px;" v-if="ruleInfo.banker_score==4">
									<div class="selectText">1000</div>
								</div>
							</div>
						</div>
	                
	                <!-- <div class="createCommit" v-on:click="cancelGameRule" >确定</div> -->

					</div>
				</div>
			</div>

			<!-- 设置音频 -->
			<div class="audioRoom" id="vaudioRoom" v-show="editAudioInfo.isShow">
				<div class="audioRoomBack" v-on:click="cancelAudioSetting"></div>
				<div class="mainPart" >			
					<div  class="createB"></div>
					<div class="createTitle" style="height:4vh;"></div>	

					<img src="<?php echo $image_url;?>files/images/common/cancel.png" class="cancelCreate" v-on:click="cancelAudioSetting"/>
					<div class="blueBack">
						<div style="height:0.5vh;"></div>

						<div class="selectPart" style="height:4vh;line-height:4vh;padding:0.8vh 0;">
							<div class="selectTitle">背景音乐：</div>
							<div class="selectList" >
								<div class="selectItem"v-on:click="setBackMusic" >
									<div class="selectBox"></div>
									<img src="<?php echo $image_url;?>files/images/common/tick.png" v-show="editAudioInfo.backMusic==1"/>
									<div class="selectText">开启</div>
								</div>							
							</div>
						</div>

						<div class="selectPart" style="height:4vh;line-height:4vh;padding:0.8vh 0;">
							<div class="selectTitle">游戏音效：</div>
							<div class="selectList" >
								<div class="selectItem"  v-on:click="setMessageMusic">
									<div class="selectBox"></div>
									<img src="<?php echo $image_url;?>files/images/common/tick.png" v-show="editAudioInfo.messageMusic==1"/>
									<div class="selectText">开启</div>
								</div>							
							</div>
						</div>
						<div class="createCommit activeButton" v-on:click="confirmAudioSetting" >确定</div>


					</div>
				</div>
			</div>

			<!-- 特殊提示  -->
			<div class="alert" v-show="isShowNoteImg" v-on:click="hideNoteImg()">
				<div class="alertBack"></div>
				<img src="<?php echo $image_url;?>files/images/paijiu/rule.png" style="position: absolute;top:15vh;height:60vh;width: 44.66vh;left: 50%;margin-left:-22.33vh; " />
			</div>

			<script type="text/javascript" src="<?php echo $image_url;?>files/js/canvas.js"></script>
		</div>

</body>

<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js" ></script>
<script src="<?php echo $image_url;?>files/js/jquery-1.9.1.min.js"></script>
<script src="<?php echo $image_url;?>files/js/bscroll.js"></script>
<script src="<?php echo $image_url;?>files/js/jquery.marquee.min.js" type="text/javascript"></script>
<script src="<?php echo $image_url;?>files/js/vue.min.js" ></script>
<script src="<?php echo $image_url;?>files/js/vue-resource.min.js" ></script>
<script src="<?php echo $image_url;?>files/js/paijiu-3-21.js"></script>
<script type="text/javascript" src="<?php echo $image_url;?>files/js/clipboard.min.js"></script>
<script type="text/javascript" src="<?php echo $image_url;?>files/layer/mobile/layer.js"></script>
<script>
    var clipboard = new ClipboardJS('.copyMe',{
        text: function(trigger) {
            return "牌九（房间号" + globalData.roomNumber + "）："+ globalData.roomUrl;
        }
    });
    clipboard.on('success', function(e) {
        console.log(e);
        layer.open({
            content: '复制成功！'
            ,skin: 'msg'
            ,time: 4
        });
    });

</script>
</html>
